<!--
 * @Author: fengxx
 * @Date: 2025-10-15 10:57:06
 * @LastEditors: fengxx
 * @LastEditTime: 2025-10-22 10:56:45
-->
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { useHomeStore } from '@/stores/home'
import { storeToRefs } from 'pinia'
// import {cloneDeep} from 'lodash'

const homeStore = useHomeStore()
const { totalData, visitOpt } = storeToRefs(homeStore)

onMounted(async () => {
  const myChart = echarts.init(document.getElementById('line-chart'))
  // 获取顶部的统计信息
  // homeStore.getTotalData()
  // await homeStore.getVisitTypeDatas()

  myChart.setOption({
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['Email', 'Union Ads'],
      top: 20,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        color: 'rgb(64, 158, 255)',
      },
      axisLine: {
        lineStyle: {
          color: 'rgb(64, 158, 255)', // 线的颜色
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgb(64, 158, 255)',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgb(64, 158, 255)', // 线的颜色
        },
      },
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
        lineStyle: {
          color: 'rgb(64, 158, 255)',
        },
        itemStyle: {
          color: 'rgb(64, 158, 255)',
        },
        smooth: true,
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
        lineStyle: {
          color: '#f4516c',
        },
        itemStyle: {
          color: '#f4516c',
        },
        smooth: true,
      },
    ],
  })

  const barChart = echarts.init(document.getElementById('bar-chart'))
  console.log(visitOpt)
  // 绘制图表

  barChart.setOption({
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgb(64, 158, 255)',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgb(64, 158, 255)', // 线的颜色
        },
      },
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        color: 'rgb(64, 158, 255)',
      },
      axisLine: {
        lineStyle: {
          color: 'rgb(64, 158, 255)', // 线的颜色
        },
      },
    },
    series: [
      {
        name: 'pageA',
        type: 'bar',
        stack: 'total',
        barWidth: '60%',
        itemStyle: {
          color: 'rgb(64, 158, 255)',
        },
        data: [100, 302, 301, 334, 390, 330, 320],
      },
      {
        name: 'pageB',
        type: 'bar',
        stack: 'total',
        barWidth: '60%',
        itemStyle: {
          color: '#c7b2f3',
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: 'pageC',
        type: 'bar',
        stack: 'total',
        barWidth: '60%',
        itemStyle: {
          color: '#40c9c6',
        },
        data: [320, 132, 101, 134, 90, 230, 210],
      },
    ],
  })

  // echarts 随着窗口大小的变化而变化
  window.onresize = function () {
    myChart.resize()
    barChart.resize()
  }
})

const tableData = [
  {
    orderNo: '5EbA5C7a-3354-AfaF-Ee99-DbDF16',
    price: '¥3,662.2',
    status: 'success',
  },
  {
    orderNo: 'A7F2c4ba-Af1b-2bA6-BC1e-AAc9B4',
    price: '¥13,930.2',
    status: 'pending',
  },
  {
    orderNo: '5EbA5C7a-3354-AfaF-Ee99-DbDF16',
    price: '¥3,662.2',
    status: 'success',
  },
  {
    orderNo: 'A7F2c4ba-Af1b-2bA6-BC1e-AAc9B4',
    price: '¥13,930.2',
    status: 'pending',
  },
]

const todoList = ref([
  {
    id: 1,
    title: 'star this repository',
    selected: true,
  },
  {
    id: 2,
    title: 'follow author',
    selected: false,
  },
  {
    id: 3,
    title: 'vue-element-admin',
    selected: true,
  },
  {
    id: 4,
    title: 'element-ui',
    selected: false,
  },
])
const handleTypes = ref([
  {
    label: 'All',
    isActive: true,
  },
  {
    label: 'Active',
    isActive: false,
  },
  {
    label: 'Complete',
    isActive: false,
  },
])

// 是否全选的状态
const isAllSelected = ref(false)
const insertItemTxt = ref('')

// 改状态
const changeTodoStatus = (index: number) => {
  todoList.value[index].selected = !todoList.value[index].selected
}

// 删除状态
const delItem = (index: number) => {
  todoList.value.splice(index, 1)
}

// 全选
const allSelect = () => {
  isAllSelected.value = !isAllSelected.value
}

// 回车插入列表信息
const onInsertItem = (e: Event | KeyboardEvent) => {
  // 按下enter键才处理事件
  if ((e as KeyboardEvent).code === 'Enter') {
    todoList.value.push({
      id: 1,
      title: insertItemTxt.value,
      selected: false,
    })
  }
}

// 筛选列表
const filterList = (label: string) => {
  const newArr = [...todoList.value]
  if (label === 'All') {
    todoList.value = newArr
  } else if (label === 'Active') {
    todoList.value = newArr.filter((item) => !item.selected)
  } else {
    todoList.value = newArr.filter((item) => item.selected)
  }
}

// watch(isAllSelected, () => {
//   todoList.value.forEach((element) => {
//     element.selected = isAllSelected
//   })
// })
</script>
<template>
  <el-row :gutter="20">
    <el-col :md="12" :lg="6" class="total-wrap">
      <el-card :body-style="{ padding: '16px', cursor: 'pointer' }">
        <div class="card-item">
          <div class="icon-style">
            <el-icon><Pouring /></el-icon>
          </div>
          <div>
            <div class="card-item-title">New Visits</div>
            <div class="card-item-value">{{ totalData.newVisit }}</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :md="12" :lg="6" class="total-wrap"
      ><el-card :body-style="{ padding: '16px', cursor: 'pointer' }">
        <div class="card-item">
          <div class="icon-style">
            <el-icon><VideoCameraFilled /></el-icon>
          </div>
          <div>
            <div class="card-item-title">Messages</div>
            <div class="card-item-value">{{ totalData.messages }}</div>
          </div>
        </div>
      </el-card></el-col
    >
    <el-col :md="12" :lg="6" class="total-wrap"
      ><el-card :body-style="{ padding: '16px', cursor: 'pointer' }">
        <div class="card-item">
          <div class="icon-style">
            <el-icon><Platform /></el-icon>
          </div>
          <div>
            <div class="card-item-title">Purchases</div>
            <div class="card-item-value">{{ totalData.purchases }}</div>
          </div>
        </div>
      </el-card></el-col
    >
    <el-col :md="12" :lg="6" class="total-wrap"
      ><el-card :body-style="{ padding: '16px', cursor: 'pointer' }">
        <div class="card-item">
          <div class="icon-style">
            <el-icon><Food /></el-icon>
          </div>
          <div>
            <div class="card-item-title">Shoppings</div>
            <div class="card-item-value">{{ totalData.shoppings }}</div>
          </div>
        </div>
      </el-card></el-col
    >
  </el-row>
  <div class="line-chart" id="line-chart"></div>
  <el-row :gutter="20">
    <el-col :md="24" :lg="12" class="total-wrap">
      <div style="width: 100%; height: 360px" id="bar-chart"></div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :md="24" :lg="12" class="total-wrap">
      <el-table :data="tableData">
        <el-table-column prop="orderNo" label="Order_No" />
        <el-table-column prop="price" label="Price" />
        <el-table-column prop="status" label="Status">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status === 'success'">Tag 2</el-tag>
            <el-tag type="danger" v-else>Tag 2</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :md="24" :lg="12" class="total-wrap">
      <div>
        <div class="todo-list-title">
          <el-icon @click="allSelect" :style="{ color: isAllSelected ? '#737373' : '#e6e6e6' }"
            ><ArrowDownBold
          /></el-icon>
          <el-input
            v-model="insertItemTxt"
            class="title-input"
            placeholder="Todo List"
            @keydown="onInsertItem"
          />
        </div>
        <div v-for="(value, index) in todoList" :key="index" class="todo-list-item">
          <div class="list-item-left">
            <div class="check-cicle" @click="changeTodoStatus(index)">
              <el-icon style="color: #13ce66; font-size: 18px" v-if="value.selected"
                ><Check
              /></el-icon>
            </div>
            <div :class="value.selected ? 'del-style' : 'normal-style'">{{ value.title }}</div>
          </div>
          <el-icon class="del-icon" style="color: #af5b5e" @click="delItem(index)"
            ><CloseBold
          /></el-icon>
        </div>
        <div>
          <span>items</span>
          <span
            v-for="value in handleTypes"
            :key="value.label"
            class="handle-span"
            :class="{ 'handle-span-active': value.isActive }"
            @click="filterList(value.label)"
          >
            {{ value.label }}
          </span>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<style scoped>
.total-wrap {
  margin-bottom: 20px;
  &:nth-child(1) {
    .icon-style {
      color: green;
    }
    .icon-style:hover {
      background-color: green;
      color: #fff;
    }
  }
  &:nth-child(2) {
    .icon-style {
      color: blue;
    }
    .icon-style:hover {
      background-color: blue;
      color: #fff;
    }
  }
  &:nth-child(3) {
    .icon-style {
      color: red;
    }
    .icon-style:hover {
      background-color: red;
      color: #fff;
    }
  }
  &:nth-child(4) {
    .icon-style {
      color: greenyellow;
    }
    .icon-style:hover {
      background-color: greenyellow;
      color: #fff;
    }
  }
}
.card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card-item-title {
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin-bottom: 12px;
  }
  .card-item-value {
    font-size: 20px;
    font-weight: 700;
  }
}
.icon-style {
  font-size: 40px;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  text-align: center;
}

.line-chart {
  width: 100%;
  height: 360px;
}
.todo-list-title {
  padding: 5px 10px;
  .title-input {
    margin-left: 8px;
    width: 240px;
  }
}
.todo-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  padding: 8px;
  cursor: pointer;
  .list-item-left {
    display: flex;
    align-items: center;
    .del-style {
      color: #d9d9d9;
      text-decoration: line-through;
    }
    .normal-style {
      color: #4d4d4d;
      font-weight: 700;
    }
  }
  .check-cicle {
    border: 1px solid #ddd;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .del-icon {
    display: none;
  }
  &:hover {
    .del-icon {
      display: block;
    }
  }
}
.handle-span {
  font-size: 12px;
  padding: 3px 7px;
  margin: 0 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  &:hover {
    border-color: rgba(175, 47, 47, 0.2);
  }
}
.handle-span-active {
  border-color: rgba(175, 47, 47, 0.2);
}
</style>
